<template>
  <div>
    <div class="attachment">
      <div class="right">
        <InputSearch @search="serarchAttachment" />
        <div v-loading="loading" class="attachment_box">
          <div v-for="item in attachmentData" :key="item.id" class="attachment_item">
            <div id="video" :class="currentClass(item.id)" @click="handelChoose(item)">
              <!-- 图片附件 -->
              <el-image :class="currentClass(item.id)" v-if="item.type == 2" :src="item.url" alt="" />
              <!-- 视频附件 -->
              <img src="~@/assets/icon-video.png" v-if="item.type == 3" alt="" class="icon" />
              <!-- 文档附件 -->
              <img src="~@/assets/icon-word.png" v-else-if="item.type == 4" alt="" class="icon" />
              <!-- 音频附件 -->
              <img src="~@/assets/icon-audio.png" v-else-if="item.type == 5" alt="" class="icon" />
              <!-- 压缩包附件 -->
              <img src="~@/assets/icon-rar.png" v-else-if="item.type == 1" alt="" class="icon" />
              <i class="el-icon-check" :class="currentClass(item.id)"></i>
            </div>

            <p class="attachment_name">{{ item.name }}</p>
          </div>
          <div class="attachment_item seat" />
          <div class="attachment_item seat" />
          <div class="attachment_item seat" />
          <div class="attachment_item seat" />
        </div>
        <el-pagination :current-page="page.currentPage" :page-sizes="page.pageSizes" :page-size="page.size"
          layout="total, prev, pager, next, jumper" :total="page.total"
          :hide-on-single-page="page.total < page.size ? true : false" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>
</template>

<script>
import attachmentApi from '@/api/system/attachment'
export default {
  props: {
    // title: {
    //   type: String,
    //   default: '选择附件'
    // },
    dialogShow: {
      type: Boolean,
      default: false
    },
    attachmentType: {
      default: 2
    },
    attachmentCate: {
      default: 0
    }
  },
  data() {
    return {
      uploadData: {
        type: 2,
        attachment_cate_id: 0
      },
      cateTitle: '',
      cateList: [], // 附件分类列表
      showDialog: false,
      show: false,
      fullscreen: false,
      loading: false,
      num: 0,
      attachmentData: [],
      imagelist: [],
      myHeaders: { Authorization: `Bearer ${this.$store.getters.token}` },
      headers: {},
      logoUrl: '',
      wechatUrl: '',
      imgUrl: this.$store.getters.updateURL,
      page: {
        total: 0,
        currentPage: 1,
        size: 18,
        pageSizes: [18]
      }, // 分页器
      currentNumber: [],
      currentItem: [],
      is_used: false,
      cate_id: 0,
      name: '',
      urlForm: {
        name: '',
        url: '',
        description: '',
        storage: 5
      },
      urlRules: {
        name: [
          {
            required: 'true',
            message: this.$t('请输入附件名'),
            trigger: 'blur'
          }
        ],
        url: [
          {
            required: 'true',
            message: this.$t('请输入附件地址'),
            trigger: 'blur'
          }
        ]
      }
    }
  },
  watch: {
    dialogShow(newQuestion, oldQuestion) {
      this.show = newQuestion
    },
    attachmentType(val, value) {
      this.attachmentType = val
      this.getAttachmentList()
    },
    attachmentCate(val, value) {
      console.log(val)
      this.cate_id = val
    }
  },
  created() {
    // this.getCateList()
    console.log(this.attachmentCate)
    this.getAttachmentList(this.attachmentCate)
  },
  methods: {
    // 添加网络附件
    uploadUrl() {
      const val = []
      val.push(this.urlForm)
      attachmentApi.attachmentSave(val).then(res => {
        if (res.code == 0) {
          this.$message.success(res.msg)
          this.showDialog = false
          this.getAttachmentList()
        } else {
          this.$message.error(re.smsg)
        }
      })
    },
    // 搜索附件
    serarchAttachment() {
      if (this.cate_id) {
        this.getAttachmentList(this.cate_id)
      } else {
        this.getAttachmentList(this.attachmentCate)
      }
    },

    // 选中图片
    handelChoose(item) {
      const isIn = this.currentNumber.indexOf(item.id)
      if (isIn == -1) {
        this.currentNumber.push(item.id)
        this.currentItem.push(item)
      } else {
        this.currentNumber.splice(isIn, 1)
        this.currentItem.splice(isIn, 1)
      }
      this.$emit('func', this.currentNumber.length, this.currentItem)
      // this.num = this.currentNumber.length
    },
    currentClass(index) {
      const isIn = this.currentNumber.indexOf(index)
      if (isIn != -1) {
        return 'active'
      }
    },
    // 选择附件
    choose() {
      this.$emit('func', this.currentItem)
    },
    // 附件列表
    getAttachmentList(id) {
      this.cate_id = id
      this.is_used = false
      const val = {
        limit: this.page.size,
        page: this.page.currentPage,
        type: this.attachmentType,
        cate_id: id,
        name: this.name
      }

      this.currentNumber = []
      this.currentItem = []
      this.num = 0
      attachmentApi.attachmentList(val).then(res => {
        if (res.code == 0) {
          this.attachmentData = res.data
          this.$forceUpdate()
          this.page.total = res.count
          this.imagelist = []
        }
      })
    },
    // 点击上传
    getTypeCate() {
      this.uploadData.attachment_cate_id = this.cate_id
      this.uploadData.type = this.attachmentType
    },
    // 上传中
    onProgress() {
      this.loading = true
    },
    // 上传成功
    handleSuccess(res, file, fileList) {
      this.loading = false
      if (res.code == 0) {
        this.getAttachmentList(this.cate_id)
      }
    },
    // 分页规格改变
    handleSizeChange(val) {
      this.page.size = val
      this.page.currentPage = 1
      this.getAttachmentList()
    },
    // 分页点击
    handleCurrentChange(val) {
      this.page.currentPage = val
      this.getAttachmentList(this.cate_id)
    }
  }
}
</script>
<style lang="scss">
.attachment {
  .el-badge {
    margin-right: 10px;
  }

  .el-badge__content.is-fixed {
    right: 12px;
  }

  .el-badge__content {
    background-color: var(--huocms-com-color-primary);
    border-color: var(--huocms-com-color-primary);
  }
}

#attachment {

  // 浅橙色
  .orange.el-button--primary {
    background-color: #fe872b;
  }

  //黄色
  .yellow.el-button--primary {
    background-color: #f9b633;
  }

  //灰色 删除
  .el-button.dele {
    color: #333;
    background-color: #dddddd;
    border-color: #edeef3;
  }

  .el-dialog__header {
    background: #fff !important;
    border-radius: 10px 10px 0 0 !important;
    padding: 10px 20px 1px;
  }

  .el-dialog__body {
    padding: 15px 20px 30px;
  }

  .el-dialog__title {
    color: var(--huocms-com-color-primary);
    font-size: 20px;
    font-weight: bold;
    line-height: 36px;
    // font-family: MicrosoftYaHei-Bold;
  }

  .el-dialog__title::before {
    display: inline-block;
    width: 4px;
    height: 20px;
    margin-right: 15px;
    border-radius: 4px;
    background-color: var(--huocms-com-color-primary);
    vertical-align: middle;
    content: '';
  }
}
</style>
<style scoped lang="scss">
.btn {
  text-align: center;
}

.attachment {
  display: flex;

  .el-pagination {
    margin-top: 20px;
    margin-bottom: 0 !important;
  }

  .left {
    width: 225px;
    // background-color: #ff0;
    margin-right: 10px;
  }

  .right {
    width: 100%;
    padding: 16px;
    text-align: right;

    .search-input {
      width: 200px;
    }

    .attachment_upload {
      display: inline;
      margin-right: 10px;
    }

    .attachment_box {
      margin-top: 20px;
      height: 400px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-content: flex-start;

      .el-icon-check {
        font-size: 12px;
        text-align: center;
        line-height: 15px;
        color: #fff;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color: var(--huocms-com-color-primary);
        position: absolute;
        bottom: 43px;
        right: 5px;
        display: none;
      }

      .el-icon-check.active {
        display: block;
      }

      .attachment_item.seat {
        height: 0;
      }

      .attachment_item {
        width: 16%;
        position: relative;

        .el-image {
          width: 100%;
          height: 100px;
          cursor: pointer;
          background-color: #eee;
          box-sizing: border-box;
        }

        #video {
          width: 100%;
          height: 100px;
          cursor: pointer;
          background-color: #f8f9fb;
          text-align: center;
          box-sizing: border-box;

          .icon {
            width: 50px;
            margin-top: 25px;
          }
        }

        p {
          display: block;
          width: 100%;
          height: 35px;
          line-height: 35px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          text-align: center;
        }
      }
    }
  }
}
</style>
